<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
		<style>
			
		</style>
		<script src="./src/vue.js"></script>
	</head>

	<body>
		<div id="app">
			<button @click="message=123">按钮</button>
			{{message}}
			<button @click="miaov.ketang.a=123">改变miaov中的值</button>
			{{miaov.ketang.a}}
		</div>
		<script>
			
			let vm = new Vue({
				el:'#app',
				data: {
					message:'hello,vue',
					miaov: {
						ketang: {
							a:1
						}
					}
				},
				watch: {
					message(newValue,oldValue){
						console.log(newValue,oldValue);
					},
					'miaov.ketang.a'(newValue,oldValue){
						console.log(newValue,oldValue);
					}
				}
			});

			// 观察
			// 第一个参数，是监控的属性名
			/*vm.$watch('message',function (newValue,oldValue){
				console.log(newValue,oldValue);	
			})*/
			// 属性的路径
			/*vm.$watch('miaov.ketang.a',function (newValue,oldValue){
				console.log(newValue,oldValue);	
			})*/
			/*vm.$watch('miaov.ketang',function (newValue,oldValue){
				console.log(newValue,oldValue);	
			})*/
		</script>
	</body>
</html>